<template>
  <div class="project-setting-view">
    <p class="project-setting-title">
      {{ $t("form.setting.replySettingLabel") }}

      <span class="small-font-size ml20 text-secondary-color">
        {{ $t("form.setting.enableCommentsOnPublicQuery") }}
      </span>
    </p>
    <el-divider />
    <el-form
      ref="replySettingFormRef"
      :model="settingConf"
    >
      <div class="setting-item">
        <p class="label">
          {{ $t("form.setting.enablePublicQueryReplies") }}
          <el-tooltip
            class="item"
            :content="$t('form.setting.enablePublicQueryReplies')"
            effect="dark"
            placement="top-start"
          >
            <el-icon>
              <ele-QuestionFilled />
            </el-icon>
          </el-tooltip>
        </p>
        <el-switch
          v-model="settingConf.openReply"
          @change="saveSettingHandle"
        />
      </div>
      <el-row>
        <p class="project-setting-sub-label">* {{ $t("form.setting.featureOnlyActiveWithPublicQueries") }}</p>
      </el-row>
    </el-form>
  </div>
</template>

<script setup name="ReplySetting" lang="ts">
import { ref } from "vue";
import type { FormInstance } from "element-plus";

const props = defineProps({
  settingConf: {
    type: Object,
    required: true
  }
});

const emit = defineEmits(["update"]);

const replySettingFormRef = ref<FormInstance | null>(null);

const saveSettingHandle = () => {
  replySettingFormRef.value!.validate((valid: boolean) => {
    if (valid) {
      emit("update", props.settingConf);
    } else {
      return false;
    }
  });
};
</script>

<style lang="scss" scoped>
@import "settting";
</style>
